/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="市选择：">
            <el-select
                v-model="formInline.cityId"
                value-key="id"
                filterable
                clearable
                @change="getDistrict"
            >
              <el-option
                  v-for="item in optionsListCity"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区选择：">
            <el-select
                v-model="formInline.districtId"
                value-key="id"
                filterable
                clearable
                @change="getStation"
            >
              <el-option
                  v-for="item in optionsListDistrict"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

      <el-col :span="7">
        <el-form-item label="充电站选择：">
          <el-select
              v-model="formInline.stationId"
              value-key="id"
              filterable
              clearable
          >
            <el-option
                v-for="item in optionsListStation"
                :key="item.id"
                :label="item.staName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
<!--      <el-col :span="6">-->
<!--        <el-form-item>-->
<!--          -->
<!--        </el-form-item>-->
<!--      </el-col>-->
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="设备名称">
            <el-input v-model="formInline.deviceName" placeholder="设备名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备类型">
            <el-select
              v-model="formInline.deviceType"
              value-key="id"
              filterable
              clearable
            >
              <el-option
                v-for="item in optionsDeviceType"
                :key="item.deviceType"
                :label="item.deviceType"
                :value="item.deviceType"
              />
            </el-select>
<!--            <el-input v-model="formInline.deviceType" placeholder="设备类型"></el-input>-->
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="故障等级：">
            <el-select
              v-model="formInline.faultValue"
              value-key="id"
              filterable
              clearable
            >
              <el-option
                v-for="item in optionsFaultClassList"
                :key="item.faultValue"
                :label="item.faultClass"
                :value="item.faultValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="cityName" label="市"></el-table-column>
      <el-table-column prop="districtName" label="区"></el-table-column>
      <el-table-column prop="stationName" label="充电站" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="deviceType" label="设备类型"></el-table-column>
      <el-table-column prop="deviceFactory" label="生产厂家" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="faultName" label="故障名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="faultDisplay" label="点位(url)" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="faultReason" label="故障原因" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="faultCode" label="故障代码"></el-table-column>
      <el-table-column prop="faultValue" label="故障等级" :formatter="formatFaultClass"/>
      <el-table-column prop="faultStartTime" label="故障开始时间" :formatter="formaTime" min-width="200" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="faultEndTime" label="故障结束时间" :formatter="formaTime" min-width="200" :show-overflow-tooltip="true"></el-table-column>
<!--      <el-table-column prop="faultDurationTime" label="故障持续时间"></el-table-column>-->
      <el-table-column prop="treatStatus" label="解决状态">
        <template v-slot="scope">
          <span v-if="scope.row.treatStatus === 0">未解决</span>
          <span v-if="scope.row.treatStatus === 1">已解决</span>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" width="200">
        <template v-slot="scope">
          <el-button class="common-btn" @click="detailRule(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 20px"
        :page-size="formInline.pageSize"
        layout="total, sizes, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formInline.pageNumber"
        :total="formInline.total">
    </el-pagination>

        <modelDialog v-if="ModelDialogShow"
                     :ModelDialogShow="ModelDialogShow"
                     :modelParam="modelParam"
                     @closeDialog="closeDialog"
                     @refresh="search"
                     @showHistoryDialog="showHistoryDialog"></modelDialog>

        <modelHistoryDialog v-if="ModelHistoryDialogShow"
                     :ModelHistoryDialogShow="ModelHistoryDialogShow"
                     :modelHistoryParam="modelHistoryParam"
                     @closeDialog="closeHistoryDialog"></modelHistoryDialog>

  </div>
</template>

<script>
import {queryTreat, treatDetail, queryFaultClass} from "../../../../api/fault/index"
import {plan} from '../../../../api/inspection/apiUntil'
import {formatDate} from "@/utils/DateFormat"
import modelDialog from "./modelDialog";
import modelHistoryDialog from "./modelHistoryDialog";
import {getDeviceType} from "../../../../api/risk/commonDict";

export default {
  components: {
    modelDialog,
    modelHistoryDialog
  },
  data() {
    return {
      option: [],
      tableData: [],
      optionsListCity: [],
      optionsListDistrict: [],
      optionsListStation: [],
      optionsDeviceType: [],
      optionsFaultClassList: [],
      formInline: {
        cityId: '',
        districtId: '',
        stationId: '',
        deviceName: '',
        deviceType: '',
        faultValue: '',
        pageSize: 10,
        pageNumber: 1,
        total: 0
      },
      modelParam: {},
      modelHistoryParam: {},
      actionParam: {
        modelId: '',
        modelType: '',
        action: ''
      },
      ModelDialogShow: false,
      ModelHistoryDialogShow: false,
    };
  },
  mounted() {
    this.getInit()
  },
  methods: {
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getInit()
    },
    formaTime(row, col) {
      return formatDate("YYYY-mm-dd HH:MM:SS", row[col.property])
    },
    search() {
      this.refreshPageByCondition()
    },
    reset() {
      this.formInline.cityId = ''
      this.formInline.districtId = ''
      this.formInline.stationId = ''
      this.formInline.deviceName = ''
      this.formInline.deviceType = ''
      this.formInline.faultValue = ''
      this.refreshPageByCondition()
    },
    async detailRule(model) {
      this.modelParam.type = 'detail'
      await this.getModelParam(model)
      this.ModelDialogShow = true
    },
    async getModelParam(model) {
      await this.getDetail(model.id)
      this.modelParam.modelId = model.id
    },
    async getDetail(modelId) {
      await treatDetail({faultId: modelId}).then((res) => {
        this.modelParam.model = res.data
      })
    },
    closeDialog() {
      this.ModelDialogShow = false
    },
    closeHistoryDialog() {
      this.ModelHistoryDialogShow = false
    },
    showHistoryDialog(data) {
      this.ModelHistoryDialogShow = true
      this.modelHistoryParam = data
    },
    getInit() {
      this.refreshPageByInit()
      this.getCity()
      getDeviceType().then((res)=>{
        if(res){
          this.optionsDeviceType = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      queryFaultClass().then((res) => {
        if (res) {
          this.optionsFaultClassList = res.data
        }
      })
    },
    refreshPageByInit() {
      this.refreshPage({})
    },
    refreshPageByCondition() {
      let params = {
        cityId: this.formInline.cityId,
        districtId: this.formInline.districtId,
        stationId: this.formInline.stationId,
        deviceName: this.formInline.deviceName,
        deviceType: this.formInline.deviceType,
        faultValue: this.formInline.faultValue
      }
      this.refreshPage(params)
    },
    refreshPage(params) {
      params.pageNumber = this.formInline.pageNumber
      params.pageSize = this.formInline.pageSize
      queryTreat(params).then((res) => {
        if (res) {
          this.tableData = res.data.list
          this.formInline.total = res.data.listSize
        }
      })
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val
      this.getInit()
    },
    getCity() {
      plan.getPlanCity().then((res) => {
        if (res) {
          this.optionsListCity = res.data
        }
      })
    },
    getDistrict() {
      this.optionsListDistrict = this.optionsListCity.find(it=>it.id===this.formInline.cityId).children || []
    },
    getStation() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        if (res) {
          this.optionsListStation = res.data
        }
      })
    },
    formatFaultClass(row, col) {
      let obj = this.optionsFaultClassList.find((r) => row[col.property].toString() === r.faultValue.toString())
      if (obj) {
        return obj.faultClass
      }
      return row[col.property]
    },
  }
}
</script>

<style scoped>

</style>
